<template>
  <div class="weather72" id="weather72"></div>
</template>

<script setup>
import { ref,onMounted } from "vue"
import * as echarts from 'echarts'
import { getHourWeather } from "@/api/plant"
import moment from "moment"

const srUrl = 'https://ftp.cqtancheng.com/files/farming-skin'

const staticImage = {
  icoWeather100: srUrl+'/ico-weather-100.png', // 首页 天气图标100 晴 白天
  icoWeather101: srUrl+'/ico-weather-104.png', // 首页 天气图标101 多云
  icoWeather102: srUrl+'/ico-weather-104.png', // 首页 天气图标102 少云
  icoWeather104: srUrl+'/ico-weather-104.png', // 首页 天气图标104
  icoWeather150: srUrl+'/ico-weather-100.png', // 首页 天气图标150 晴 晚上
  icoWeather151: srUrl+'/ico-weather-104.png', // 首页 天气图标152 多云
  icoWeather152: srUrl+'/ico-weather-104.png', // 首页 天气图标152 少云
  icoWeather153: srUrl+'/ico-weather-153.png', // 首页 天气图标153
  icoWeather300: srUrl+'/ico-weather-300.png', // 首页 天气图标300
  icoWeather301: srUrl+'/ico-weather-301.png', // 首页 天气图标301
  icoWeather302: srUrl+'/ico-weather-302.png', // 首页 天气图标302
  icoWeather305: srUrl+'/ico-weather-305.png', // 首页 天气图标305
  icoWeather306: srUrl+'/ico-weather-306.png', // 首页 天气图标306
  icoWeather307: srUrl+'/ico-weather-307.png', // 首页 天气图标307
  icoWeather311: srUrl+'/ico-weather-311.png', // 首页 天气图标311
  icoWeather313: srUrl+'/ico-weather-313.png', // 首页 天气图标313 冻雨
  icoWeather400: srUrl+'/ico-weather-400.png', // 首页 天气图标400 小雪
  icoWeather401: srUrl+'/ico-weather-401.png', // 首页 天气图标401 中雪
  icoWeather403: srUrl+'/ico-weather-403.png', // 首页 天气图标403 中雪
  icoWeather404: srUrl+'/ico-weather-404.png', // 首页 天气图标404 雨夹雪
  icoWeather406: srUrl+'/ico-weather-406.png', // 首页 天气图标406 阵雨夹雪
  icoWeather500: srUrl+'/ico-weather-500.png', // 首页 天气图标500 薄雾
  icoWeather501: srUrl+'/ico-weather-501.png', // 首页 天气图标501 雾
  icoWeather508: srUrl+'/ico-weather-508.png', // 首页 天气图标508
}
const props = defineProps({
  item:{
    type:Object,
    default:{}
  }
})
const setChart = (w) => {
    let weather72 = document.getElementById('weather72')
    let weather72Chart = echarts.init(weather72)
    let tempOption = {
      grid: {
          show: false,
          top: "90",
          bottom: "130",
          right: "50",
          left: "50"
      },
      tooltip: {
        trigger: 'axis'
      },
      dataZoom: [
        {
          type: 'slider',
          startValue: 0,
          endValue: 7,
          height: 20,
          maxValueSpan: 6,
          minValueSpan: 6
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '/°C',
          splitNumber: 5,
          nameGap: 25,
          max: w.wwdMax,
          min: w.wwdMin,
          interval: 5,
          splitLine: {
            show: false
          },
          nameTextStyle: {
            padding:[0,30,0,0]
          }
        },
        {
          type: 'value',
          name: '/%',
          splitNumber: 5,
          nameGap: 25,
          max: 100,
          min: 0,
          nameTextStyle: {
            padding:[0,0,0,30]
          }
        }
      ],
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          position: "bottom",
          offset: 10,
        //   data: ['17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '23:00', '23:00', '23:00', '23:00', '23:00', '23:00', '23:00', '23:00', '23:00'],
          data: w.wtime,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          type: "category",
          boundaryGap: true,
          position: "bottom",
          offset: 35,
        //   data: ['东风', '南风', '西风', '北风', '东北风', '东南风', '西南风', '东风', '南风', '西风', '北风', '东北风', '东南风', '西南风', '东风', '南风'],
          data: w.wwind,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // rotate: 45,
            // formatter: '{value}级',
            fontWeight: 'bold', color: '#999', fontSize: '12px'
          }
        },
        {
          type: "category",
          boundaryGap: true,
          position: "bottom",
          offset: 55,
        //   data: ['0级', '1级', '2级', '3级', '4级', '5级', '6级', '0级', '1级', '2级', '3级', '4级', '5级', '6级', '0级', '1级'],
          data: w.wlv,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value}级',
            fontWeight: 'bold', color: '#999', fontSize: '12px'
          }
        },
        {
          type: "category",
          boundaryGap: true,
          position: "top",
          offset: 50,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            formatter: ["{a|{value}}"].join("\n"),
            rich: {
              a: {
                fontSize: 14,
              },
            },
          },
          nameTextStyle: {},
        //   data: ['雷电', '小雪', '日多云', '霾', '沙尘暴', '大风', '阴', '雷电', '小雪', '日多云', '霾', '沙尘暴', '大风', '阴', '雷电', '小雪'],
          data: w.wname,
        },
        {
          type: "category",
          boundaryGap: true,
          offset: 10,
          position: "top",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            formatter: (value, index) => {
              // return "{acs| }\n{b|" + value + "}";
              return '{' + value + '| }\n{b|' + value + '}'
            },
            rich: {
              ...getWeatherIcon(w.wico, w.wicon),
              b: {
                fontSize: 12,
                lineHeight: 0,
                height: 20,
                color: 'transparent'
              }
            }
          },
          data: w.wicon
        //   data: ['雷电', '小雪', '日多云', '霾', '沙尘暴', '大风', '阴', '雷电', '小雪', '日多云', '霾', '沙尘暴', '大风', '阴', '雷电', '小雪'],
        }
      ],
      series: [
        {
          name: '气温',
          type: 'line',
        //   data: [25, 18, 29, 30, 33, 30, 25, 25, 18, 29, 30, 33, 30, 25, 25, 18],
          data: w.wwd,
          symbol: 'circle',
          symbolSize: 6,
          smooth: true,
          yAxisIndex: 0,
          itemStyle: {
            color: "#ee8535"
          }
        },
        {
          name: '湿度',
          type: 'line',
        //   data: [54, 50, 71, 68, 78, 73, 65, 54, 50, 71, 68, 78, 73, 65, 54, 50],
          data: w.wsd,
          symbol: 'circle',
          symbolSize: 6,
          smooth: true,
          yAxisIndex: 1,
          itemStyle: {
            color: "#7ddfd7"
          }
        }
      ]
    }
    weather72Chart.clear()
    weather72Chart.setOption(tempOption)
}
onMounted(()=>{
  // get_weather_72_hour(`${props.item.locationLongitude},${props.item.locationLatitude}`)
})
const get_weather_72_hour = async (loc) => {
    let dt = process.env.NODE_ENV=='development'?'h24':'h72'
    const res = await getHourWeather(dt, loc)
    // console.log(res.hourly)
    if( res.hourly && res.hourly.length>0 ){
        let w = { // 天气数据
            wname: [], // 天气名称
            wico: [], // 天气图标
            wicon: [], // 天气图标号
            wwd: [], // 湿度
            wsd: [], // 湿度
            wtime: [], // 时间
            wwind: [], // 风向
            wlv: [] // 风级数
        }
        res.hourly.forEach(item => {
            // d.setHours()
            item.fxTimes = moment(parseInt(item.fxTime.slice(11,13))+8).format('hh')+':00'
            w.wname.push(item.text)
            w.wico.push(staticImage['icoWeather'+item.icon])
            w.wicon.push(item.icon)
            w.wwd.push(item.temp)
            w.wsd.push(item.humidity)
            w.wtime.push(moment(item.fxTime).format('HH:mm'))
            w.wwind.push(item.windDir)
            w.wlv.push(item.windScale)
        })
        w.wwdMax = Math.ceil(Math.max(...w.wwd) + 5)
        w.wwdMin = Math.floor(Math.min(...w.wwd) - 5)
        setChart(w)
    }
}

const getWeatherIcon = (list, list2) => {
    let obj = {}
    list.forEach((i,index)=>{
        obj[list2[index]] = {
            backgroundColor: {
                image: i
            },
            height: 28,
            width: 28,
        }
    })
    return obj
}
defineExpose({ get_weather_72_hour })
</script>

<style lang="scss">
.weather72 {
  height: 360px;
}
</style>
